<template>
    <v-card
        class="category-card"
        :color="category.color"
        theme="dark"
        @click="toggleExpand"
    >
        <v-card-text class="d-flex align-center">
            <v-icon
                :icon="category.icon"
                size="x-large"
                class="mr-4"
            ></v-icon>
            <div>
                <div class="text-h6">{{ category.name }}</div>
                <div class="text-caption">{{ category.count }} 篇文章</div>
            </div>
            <v-icon
                v-if="category.children?.length > 0"
                :icon="category.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                class="ml-auto"
            ></v-icon>
        </v-card-text>
    </v-card>
    <v-expand-transition>
        <div v-if="category.expanded">
            <v-row>
                <v-col
                    v-for="child in category.children"
                    :key="child.name"
                    cols="12"
                    sm="6"
                    md="4"
                >
                    <CategoryItem :category="child"/>
                </v-col>
            </v-row>
        </div>
    </v-expand-transition>
</template>

<script setup lang="ts">
import {defineProps, withDefaults} from 'vue';

interface Props {
    category: Category;
}

const props = withDefaults(defineProps<Props>(), {
    category: () => ({
        name: '',
        level: 1,
        children: [],
        count: 0,
        icon: '',
        color: '',
        expanded: false,
    }),
});

const toggleExpand = () => {
    props.category.expanded = !props.category.expanded;
};
</script>

<style scoped>
.category-card {
    transition: transform 0.2s;
}

.category-card:hover {
    transform: translateY(-4px);
}
</style>
